<!-- 模板1 -->
<template>
	<div class="padding-container">
		<!-- 搜索栏 -->
		<el-card class="search">
			<!-- 使用el布局 -->
			<el-row>
				<!-- 左侧搜索信息占80% -->
				<el-col :span="20">
					<el-col :span="8">
						<div class="search_grop">
							<el-input placeholder="订单ID" prefix-icon="el-icon-search"
								v-model="searchModel.order.orderId" size="medium">
							</el-input>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<el-select v-model="searchModel.order.typeId" clearable placeholder="订单类型" size="medium">
								<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<div class="search_grop">
								<el-select v-model="searchModel.order.status" clearable placeholder="订单状态"
									size="medium">
									<el-option v-for="item in statusList" :key="item.id" :label="item.name"
										:value="item.id">
									</el-option>
								</el-select>
							</div>
						</div>
					</el-col>
				</el-col>
				<!-- 左侧搜索栏按钮占20% -->
				<el-col :span="4">
					<el-col :span="12">
						<div>
							<el-button type="primary" v-waves plain size="medium" @click="search">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-button type="success" plain size="medium" @click="openEdit(null)">添加</el-button>
						</div>
					</el-col>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20">
					<el-col :span="8">
						<div class="block">
							<el-date-picker v-model="searchTime" type="daterange" start-placeholder="开始日期"
								end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
								<!-- @change="showSearchTime()" -->
							</el-date-picker>
						</div>
					</el-col>
				</el-col>

			</el-row>
		</el-card>
		<!-- 显示栏 -->
		<el-card class="tables">
			<el-table height="430" :data="tableData" style="width: 100%" v-loading="tableLoading">
				<el-table-column type="index" label="订单ID" width="80">
				</el-table-column>
				<el-table-column prop="userId" label="用户ID" width="80" align="center">
				</el-table-column>
				<el-table-column prop="typeId" label="订单类型" width="120" align="center">
				</el-table-column>
				<el-table-column prop="status" label="订单状态" width="120" align="center">
				</el-table-column>
				<el-table-column prop="refundReason" label="退款原因" width="120" align="center">
				</el-table-column>
				<el-table-column prop="money" label="订单总金额" width="120" align="center">
				</el-table-column>
				<el-table-column prop="createBy" label="创建者" width="100" align="center">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="100" align="center">
				</el-table-column>
				<el-table-column prop="updateBy" label="更新者" width="100" align="center">
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="100" align="center">
				</el-table-column>
				<el-table-column align="right">
					操作
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="openEdit(scope.$index)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 分页 -->
		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="searchModel.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="searchModel.pageSize"
				:pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center"
				background>
			</el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="60%" @close="handleClose">
			<!-- 弹出框详细内容 -->
			<h2>订单信息</h2>
			<el-form ref="order" :rules="rules" :model="order" label-width="80px" size="mini">
				<el-form-item label="订单ID" >
					<el-input v-model="order.orderId" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="用户ID" prop="userId">
					<el-input v-model="order.userId" :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="订单类型" prop="typeId">
					<el-select v-model="order.typeId" placeholder="请选择订单类型">
						<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单状态" prop="status">
					<el-select v-model="order.status" placeholder="请选择订单状态">
						<el-option v-for="item in statusList" :key="item.id" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="退款原因" prop="refund_reason">
					<el-input v-model="order.refund_reason"></el-input>
				</el-form-item>
				<el-form-item label="订单金额" prop="money">
					<el-input v-model="order.money"></el-input>
				</el-form-item>
			</el-form>
			<!-- 弹出框尾部插槽 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('order')" :loading="btnLoading"
					formnovalidate>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import waves from "@/directives/waves/index.js"
	import ElDrag from "@/directives/ElDrag/index.js"
	import {
		getOrderList,
		searchById,
		search,
		insert,
		update
	} from "@/api/order/order"
	export default {
		directives: {
			waves,
			ElDrag
		},
		data() {
			return {
				// 表格加载
				tableLoading: true,
				// 按钮加载
				btnLoading: false,
				// 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
				searchModel: {
					pageNum: 1,
					pageSize: 2,
					order: {
						status: null,
						typeId: null,
						startTime: '',
						endTime: ''
					},
				},
				// 弹出窗标题
				dialogTitle: '',
				// 弹出窗显示
				dialogVisible: false,
				//输入框禁用状态
				isDisabled: false,
				// 添加 点击的
				// 总条数
				total: null,
				// 表单数据
				form: {},
				// 列表数据
				list: [{
						id: 1,
						name: '门票'
					},
					{
						id: 2,
						name: '周边'
					}
				],
				statusList: [{
						id: 1,
						name: '待付款'
					},
					{
						id: 2,
						name: '待发货'
					},
					{
						id: 3,
						name: '待收货'
					}
				],
				// 表格数据
				tableData: [],
				value: '',
				searchTime: [],
				//订单对象
				order: {
					orderId: null,
					userId: null,
					typeId: null,
					status: null,
					refund_reason: '',
					money: null
					// createBy: '',
					// createTime: '',
					// updateBy: '',
					// updateTime: ''
				},
				//表单判定规则
				rules: {
					orderId: [{
						required: true,
						message: '请填写订单号',
						trigger: 'blur'
					}],
					userId: [{
						required: true,
						message: '请填写用户id',
						trigger: 'blur'
					}],
					typeId: [{
						required: true,
						message: '请选择订单类型',
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: '请选择订单状态',
						trigger: 'change'
					}],
					refund_reason: [{
						required: false,
						message: '请填写退款原因',
						trigger: 'blur'
					}],
					money: [{
						required: true,
						message: '请订单金额',
						trigger: 'blur'
					}],
					createBy: [{
						required: true,
						message: '请填写创建者',
						trigger: 'blur'
					}],
					createTime: [{
						required: true,
						message: '请填写创建时间',
						trigger: 'change'
					}],
					updateBy: [{
						required: false,
						message: '请填写更新者',
						trigger: 'blur'
					}],
					updateTime: [{
						required: false,
						message: '请填写更新时间',
						trigger: 'change'
					}]
				}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			// 弹窗关闭触发
			handleClose() {
				console.log("关闭了");
			},
			handleSizeChange(val) {
				this.searchModel.pageSize = val;
				this.getList(this.searchModel)
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.searchModel.pageNum = val
				this.getList(this.searchModel)
				console.log(`当前页: ${val}`);
			},
			// 搜索
			search() {
				console.log("这是搜索方法");
				// 获取搜索框的内容
				const orderVo = {
					status: null,
					typeId: null,
					startTime: '',
					endTime: ''
				}
				// 订单状态 订单类型
				orderVo.status = this.searchModel.order.status * 1
				orderVo.typeId = this.searchModel.order.typeId * 1
				console.log(this.searchTime)
				if (this.searchTime && this.searchTime.length === 2) {
					const startTime = this.formatDate(this.searchTime[0]);
					const endTime = this.formatDate(this.searchTime[1]);
					//查询的时间
					orderVo.startTime = new Date(startTime);
					orderVo.endTime = new Date(endTime);
				}
				if (orderVo.status || orderVo.typeId || orderVo.startTime || orderVo.endTime) {
					console.log("传过去的数据：" + JSON.stringify(orderVo));
					console.log("orderVo" + orderVo)
					search(orderVo).then(res => {
						console.log("返回的数据：" + res.data)
						this.tableData = res.data
					})
				} else {
					this.getList()
				}
			},
			// 添加和修改都走这里
			openEdit(index) {
				console.log("index" + index)
				if (index != null) {
					//获取当前行的订单数据
					this.order = this.tableData[index];
					this.dialogTitle = '修改' // 修改
					console.log("修改")
					this.isDisabled = true
				} else {
					this.order = {};
					this.dialogTitle = '添加' // 添加
					console.log("添加")
					this.isDisabled = false
				}
				this.dialogVisible = true;
			},
			toggleStatus() {
				console.log("进行修改");
			},
			//日期格式转换 yyyy-mm-dd hh:mm:ss
			formatDate(date) {
				const formattedDate = new Date(date).toISOString().slice(0, 19).replace('T', ' ');
				return formattedDate;
			},
			//获取订单列表
			getList(data) {
				getOrderList(data).then(res => {
					if (res) {
						this.tableLoading = false
					}
					console.log(res)
					this.tableData = res.rows
					this.total = res.total
				})
			},
			//提交表单
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log("提交表单")
						// 转换类型
						const OrderForm = {
							orderId: this.order.orderId * 1,
							userId: this.order.userId * 1,
							typeId: this.order.typeId * 1,
							status: this.order.status * 1,
							refund_reason: this.order.refund_reason,
							money: this.order.money * 1.00
						};
						console.log("前端的数据：" + JSON.stringify(OrderForm));
						if (this.dialogTitle === '修改') {
							//更新
							update(OrderForm).then(res => {
								console.log("更新订单信息")
								console.log(res)
								//关闭弹窗
								this.dialogVisible = false;
								//更新列表
								this.getList()
							})
						} else {
							//添加
							insert(OrderForm).then(res => {
								console.log("添加订单")
								console.log("添加返回的结果：" + res)
								//关闭弹窗
								this.dialogVisible = false;
								//更新列表
								this.getList()
							})
						}

					} else {
						console.log('error submit!!');
						// this.resetForm(this.searchModel.order)
						return false;
					}
				});
			},
			//重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		}
	}
</script>

<style scoped>
	.dialog-goods-form .title {
		display: inline-block;
		margin-bottom: 15px;
		font-size: 18px;
	}

	.dialog-goods-form .el-input {
		width: 400px;
	}

	.dialog-goods-form .el-select {
		width: 400px;
	}

	.dialog-goods-list {
		height: 350px;
		overflow-y: auto;
	}

	.el-range-editor.el-input__inner {
		top: 10px;
		height: 36px;
	}

	.el-input-add {
		width: 300px;
		/* display: block; */
	}
</style>